<template>
	<view class="gameCircle">
		<view class="bgBox">
			<view class="card">
				<!-- 上 -->
				<view class="cardTop">
					<view class="top">
						<view class="topLeft">
							<img src="../../static/image/gameCircleImage/wzryLogo.jpg" alt="">
						</view>
						<view class="topCenter">
							<view class="trendsNum">
								1.4亿动态
							</view>
							<view class="summoner">
								<img src="../../static/image/introductionImage/al.jpg" alt="">
								<img src="../../static/image/introductionImage/l.jpg" alt="">
								<view class="summonerNum">
									2862万召唤师
									<uni-icons color="#ececec" custom-prefix="iconfont" type="icon-xiangyoujiantou"
										size="10"></uni-icons>
								</view>
							</view>
						</view>
						<view class="topRight">
							打卡
						</view>
					</view>
					<view class="bottom">

						<view>
							深圳市腾讯计算机系统有限公司
						</view>
						<view style="margin: 0 10px;">
							8.2.1.9

						</view>
						<view>
							隐私政策
						</view>
						<view style="margin-left: 10px;">
							应用权限
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="line">

				</view>
				<!-- 下 -->

				<view :class="[packUpFlag ?'develop' : 'pUp']" class="cardBottom">

					<view v-for="item in topList" class="topData">

						<img :src="item.imgUrl" alt="">
						<view class="topDataName">
							{{item.name}}
						</view>

					</view>


				</view>
				<!-- 收起按钮 -->
				<view @click="packUpClick" class="packUp">
					<uni-icons v-if="packUpFlag" style="margin-bottom: 2px;" color="#fff" custom-prefix="iconfont"
						type="icon-xuanzeqishouqi_o" size="14"></uni-icons>
					<uni-icons v-else style="margin-bottom: 2px;" color="#fff" custom-prefix="iconfont"
						type="icon-zhankai" size="14"></uni-icons>
				</view>
				<!-- 下载游戏 -->
				<view class="downloadGame">
					下载游戏
				</view>
			</view>
			<!-- tab栏 -->
			<u-tabs @change="tabsChange" gutter='80' ref="tabs" :list="tabList" :current="current"></u-tabs>
			<view class="tabsInfo">
				<game-introduce style="height: 100%;"></game-introduce>
			</view>
		</view>
	</view>
</template>
<script>
	import gameCircle from '../../mockData/gameCircleData/gameCircleData.js'
	import gameIntroduce from '../../components/gameCircleTabs1/index.vue'

	export default {
		components: {
			gameIntroduce
		},
		data() {
			return {
				title: 'Hello2222',
				topList: gameCircle.topList,
				current: 0,
				packUpFlag: false,
				tabList: [

					{
						name: '游戏介绍',
					},
					{
						name: "最新",
					}, {
						name: '官方',
					}, {
						name: '姬小满',
					}, {
						name: '新赛季',
					}, {
						name: '攻略',
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

			packUpClick() {
				this.packUpFlag = !this.packUpFlag
			},
			tabsChange(i) {
				console.log(i)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gameCircle {
		position: relative;

		.bgBox {
			height: 60px;
			background-image: linear-gradient(#94bdff, #fff);
			padding: 0 16px;
			padding-top: 16px;

			.card {
				margin-bottom: 20px;
				border-radius: 10px;
				background-color: #7f7f7f;
				padding: 10px 10px;

				.line {
					background-color: #a7a7a7;
					height: 1px;
				}

				.cardTop {

					.top {
						display: flex;
						align-items: center;
						position: relative;

						.topLeft {
							margin-right: 10px;

							img {
								width: 50px;
								height: 50px;
								border-radius: 10px;
							}
						}

						.topCenter {
							display: flex;
							flex-direction: column;
							width: 140px;

							.trendsNum {
								font-size: 12px;
								color: #ececec;
							}

							.summoner {
								display: flex;
								align-items: center;
								margin-top: 5px;

								img {
									width: 14px;
									height: 14px;
									border-radius: 50%;

									&:nth-child(2) {
										margin: 0 10px;
									}
								}

								.summonerNum {
									font-size: 12px;
									color: #ececec;
								}
							}
						}

						.topRight {
							padding: 6px 12px;
							border-radius: 15px;
							background-color: #878787;
							position: absolute;
							right: 0;
							color: #fff;
							font-size: 12px;
							font-weight: 600;
						}
					}

					.bottom {
						color: #ccc;
						font-size: 10px;
						display: flex;
						align-items: center;
						margin: 10px 0;
					}
				}

				.cardBottom {
					// -webkit-transition: all 2s linear 1s;
					display: flex;
					flex-wrap: wrap;
					line-height: 40px;
					margin-top: 10px;
					overflow: hidden;
					height: 40px;


					.topData {
						display: flex;
						align-items: center;
						align-items: center;
						width: 25%;

						img {
							width: 14px;
							height: 14px;
						}

						.topDataName {
							font-size: 14px;
							color: #fff;
							margin-left: 5px;
						}
					}
				}

				.packUp {
					padding: 8px 17px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50px;
					background-color: #a3a3a3;
					width: 0px;
					height: 0;
					margin: 0 auto;
				}

				.downloadGame {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					color: #fff;
					font-weight: 600;
					background-color: #cfdbe1;
					padding: 10px;
					border-radius: 50px;
					margin-top: 15px;
				}
			}
		}


	}

	.develop {
		height: auto !important;
	}

	.pUp {
		height: 40px !important;
	}

	.u-tabs {
		height: 20px;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		display: none;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		border: 1px solid #ccc;
		border-radius: 40px;
		height: 20px !important;
		margin-right: 8px !important;

	}

	.activeBg {
		background-color: #ccc;
	}
</style>

<style scoped>
	/* >>>.u-tabs__wrapper__nav__line {
		display: none;
	} */
</style>